<template>
  <div>
    <el-card style="margin: 20px" v-if="user.role == 1">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="请输入用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card style="margin: 20px 0 30px 0">
      <el-table
        :data="tableData"
        border
        height="600"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="100">
          <!--          <template slot-scope="scope">-->
          <!--            <span>{{getFoodName(scope.row.foodIds)}}</span>-->
          <!--          </template>-->
        </el-table-column>

        <el-table-column
          prop="sex"
          label="性别"
          width="100">
        </el-table-column>
        <el-table-column
          prop="hobby"
          label="偏好备注"
          width="180">
        </el-table-column>
        <el-table-column
          prop="integral"
          label="积分"
          width="180">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          width="180">
          <template slot-scope="scope">
            <el-tag :type="scope.row.role == 1 ? '管理员' : '普通用户'">{{scope.row.role == 1 ? '管理员' : '普通用户'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-warning-outline" size="small" type="primary" plain @click="showPayDialog(scope.row)">编辑</el-button>
            <el-button icon="el-icon-circle-close" size="small" type="danger" plain @click="delOrder(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form :model="editForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="editForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="偏好设置" prop="hobby">
          <el-input v-model="editForm.hobby"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="integral">
          <el-input v-model="editForm.integral"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="editForm.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "userList",
  data(){
    return{
      user: JSON.parse(localStorage.getItem("user")),
      searchForm:{
        name: ""
      },
      editForm:{},
      tableData: [],
      payShow: false,
      dialogVisible: false,
      row: {},
      rules: {
        name:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
        role:[{ required: true, message: '请输入角色', trigger: 'blur' }],
      },
      options: [{value: 1, label: "管理员"},{value: 0, label: "普通用户"}],
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  mounted() {
    this.listBy()
  },
  methods:{
    handleSizeChange(val){
      console.info("handleSizeChange", val)
      this.pageSize = val
      this.listBy()
    },
    handleCurrentChange(val){
      console.info("handleCurrentChange", val)
      this.currentPage = val
      this.listBy()
    },
    showPayDialog(row) {
      this.editForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    onSubmit(){
      this.listBy()
    },
    listBy() {
      if (this.user.role == 1) {
        this.axios.get("http://localhost:8080/user/queryUserList?name="+this.searchForm.name+"&page="+this.currentPage+"&size="+this.pageSize).then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.rows
          this.total = res.data.data.total
        })
      }

    },
    payOrder(id) {
      console.info(id)
      this.axios.post("http://localhost:8080/order/payOrder?id="+id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("支付成功")
          this.payShow = false
          this.listBy()
        }
      })
    },
    edit(){
      this.axios.post("http://localhost:8080/user/updateUserInfo", this.editForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功")
          this.dialogVisible = false
          this.listBy()
        }
      })
    },
    delOrder(id) {
      this.$confirm("确定要删除该食品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.axios.delete("http://localhost:8080/user/deleteUserInfo?id="+id).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功！")
            this.listBy()
          }
        })
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.drawer = false
          done();
        })
        .catch(_ => {});
    },
  }
}
</script>

<style scoped>

</style>
